
@import 'base.less';
@import 'variable.less';
@import 'mixin.less';

// 侧边栏
.aside {
	position: fixed;
	left: 0;
	top: 0;
	width: 180px;
	height: 100%;
	background-color: #2f4050;
	
	// 个人资料
	.profile {
		height: 160px;
		padding-top: 25px;
		text-align: center;
		background-color: #243443;
		
		// 头像
		.avatar {
			width: 80px;
			height: 80px;
			margin: 0 auto;
			overflow: hidden;
			border: 3px solid rgba(255, 255, 255, 0.3);
		}

		h4 {
			color: #a9b0c2;
			font-size: 16px;
		}
	}

	// 导航菜单
	.navs {
		padding: 20px 0;

		li a + ul {
			display: none;
			overflow: hidden;
		}

		a {
			width: 100%;
			line-height: 1;
			padding: 10px 20px;
			margin: 4px 0;
			color: #a9b0c2;

			&:hover {
				color: #F6F6F6;
				background-color: #243443;
			}
		}

		a + ul a {
			padding-left: 46px;
		}

		.active {
			color: #F6F6F6;
			background-color: #243443;
		}

		i {
			margin-right: 8px;
		}

		.arrow {
			float: right;
		}
	}
}

// 主体
.main {
	min-width: 844px;
	padding: 72px 0 30px 180px;
	
	// 头部
	.header {
		width: 100%;
		padding-left: 180px;
		margin-left: -195px;
		position: fixed;
		top: 0;
		z-index: 99;

		.navbar-custom {
			padding-right: 15px;
			background-color: #FFF;
			border-bottom: 1px solid #EEE;
			.border-radius(0);
		}

		.navbar-brand {
			height: auto;
			line-height: 1;
			padding: 4px 6px;
			margin: 12px 0 0 15px;
			color: #FFF;
			background-color: #5cb85c;
			.border-radius(2px);
		}

		.navbar-nav {

			a {
				position: relative;
				background-color: transparent;
			}

			.fa {
				font-size: 16px;
			}

			.badge {
				line-height: 1;
				padding: 2px 4px 3px;
				background-color: #5cb85c;
				position: absolute;
				top: 8px;
				left: 24px;
				.border-radius(4px);
			}
		}
	}
	
	// 主体
	.body {
		// 面包屑
		.breadcrumb {
			background-color: #FFF;
			border: 1px solid #EEE;
		}

		.page-title {
			padding: 10px 15px;
			margin-bottom: 20px;
			overflow: hidden;
			border-bottom: 1px solid #EEE;
			background-color: #FFF;
			.border-radius(4px);
		}
		
		// 表格
		.table {
			text-align: center;
			background-color: #FFF;
		}

		th {
			text-align: center;
			font-weight: normal;
		}

		td {
			vertical-align: middle;
		}

		label {
			color: #666;
			font-weight: normal;
		}
		
		// 分页
		.pagination {
			margin-top: 0;
		}

		.repass {
			padding: 40px 0 20px;
			background-color: #FFF;
		}
	}

	// 用户信息
	.user-profile {

		// 个人资料
		.profile {
			height: 140px;
			padding: 30px 30px 0 30px;
			margin-bottom: 20px;
			overflow: hidden;
			background-color: #FFF;
			.border-radius(4px);

			img {
				width: 80px;
				height: 80px;
				overflow: hidden;
				.border-radius(50%);
			}

			span {
				line-height: 1;
				display: block;
				margin-left: 90px;
			}

			.name {
				margin-top: 10px;
				margin-bottom: 15px;
				font-weight: bold;
				font-size: 16px;
			}

			li {
				text-align: center;
				padding: 10px 0 0;

				span {
					margin: 0;
				}

				a {
					display: block;
					height: 32px;
					line-height: 32px;
					padding: 0 40px;
					margin-top: 20px;
					border-right: 1px solid #DDD;
					font-size: 18px;
					font-weight: bold;
					color: #666;
				}
			}
		}

		// 课程
		.courses {
			margin-bottom: 20px;
			background-color: #FFF;
			overflow: hidden;
			.border-radius(4px);

			.navs {
				padding: 0 15px;
				margin: 0;
				border-bottom: 1px solid #EEE;
				overflow: hidden;

				a {
					line-height: 1;
					padding: 20px;
					font-size: 16px;
					color: #333;

					&:hover {
						color: #15c288;
					}
				}

				.active {
					color: #15c288;
				}
			}

			li {
				float: left;
			}
		}

		.course {
			padding: 20px 0;
			margin: 0 15px;
			border-bottom: 1px dashed #EEE;
			overflow: hidden;

			&:hover {
				background-color: #FCFCFC;
			}

			&:last-child {
				border-bottom: none;
			}

			.pic {
				width: 160px;
				height: 80px;
				overflow: hidden;
				float: left;

				position: relative;
			}

			.percent {
				width: 50px;
				height: 50px;
				text-align: center;
				line-height: 50px;
				margin: -25px 0 0 -25px;
				font-weight: 600;
				color: #DDD;
				background-color: rgba(0, 0, 0, 0.4);
				.border-radius(50%);
				position: absolute;
				left: 50%;
				top: 50%;
			}

			.info {
				height: 80px;
				line-height: 1;
				padding-left: 180px;

				a {
					color: #444;
					margin: 10px 0 15px;
					font-size: 18px;

					&:hover {
						color: #15c288;
					}
				}

				span {
					color: #15c288;
				}
			}
		}
	}

	// 讲师管理
	.teacher {
		
		.teacher-add {
			padding: 40px 0 20px;
			background-color: #FFF;
		}
	}

	// 讲师资料
	.teacher-profile {
		// 个人设置
		.settings {
			padding: 40px 0 20px;
			background-color: #FFF;

			.preview {
				width: 120px;
				height: 120px;
				padding: 0;
				margin-left: 15px;
				overflow: hidden;
				position: relative;

				&:hover .cover {
					background-color: rgba(0, 0, 0, 0.4);
				}

				&:hover .fa-upload {
					color: rgba(240, 240, 240, 0.8);
				}
			}

			input[type="file"] {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 9;
				width: 100%;
				height: 100%;
				opacity: 0;
			}

			.cover {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				text-align: center;
				line-height: 120px;
				font-size: 40px;
				background-color: rgba(0, 0, 0, 0);
				transition: all 0.3s;
			}

			.fa-upload {
				color: rgba(240, 240, 240, 0);
			}

			.uploadify {
				position: absolute;
				left: 0;
				top: 0;
			}

			.ckeditor {
				min-height: 300px;
			}

			textarea {
				// display: none;
			}

			select {
				width: 32%;
				margin-right: 2%;
				float: left;

				&:last-child {
					margin-right: 0;
				}
			}
		}

		// 个人资料
		.profile {

			.cell {
				padding: 15px;
				color: #FFF;
				overflow: hidden;
				.border-radius(4px);

				.fa {
					font-size: 50px;
					float: left;
				}

				span, h5 {
					display: block;
					line-height: 1.8;
					margin: 0 0 0 70px;
				}

				h5 {
					font-size: 15px;
				}

				span {
					font-size: 13px;
				}
			}

			.money {
				background-color: #FC8675;
			}

			.th {
				background-color: #5AB6DF;
			}

			.user {
				background-color: #65CEA7;
			}

			.eye {
				background-color: #EBC85E;
			}

			// 图表
			.chart {
				min-height: 400px;
				padding: 30px 15px;
				margin-top: 20px;
				background-color: #FFF;
				overflow: hidden;
			}
		}
	}

	// 创建课程
	.course-add {
		
		.steps {
			min-height: 500px;
			margin-bottom: 80px;
			.border-radius(4px);
		}
		
		// 摘要
		.brief {
			overflow: hidden;
			background-color: #FFF;

			.thumb {
				width: 240px;
				height: 120px;
				background-image: url(../images/course.png);
				background-size: contain;
				float: left;
				position: relative;
			}

			.info {
				height: 100px;
				padding-top: 20px;
				margin-left: 260px;
			}

			dt {
				line-height: 1;
				margin-bottom: 10px;
				font-size: 16px;
				font-weight: normal;
				color: #666;
			}

			dd {
				line-height: 2;
				font-size: 14px;
				color: #999;
			}
		}
		
		// 步骤
		.forwards {
			width: 240px;
			margin-top: 20px;
			background-color: #FFF;
			float: left;

			li {
				text-align: center;
				border-bottom: 1px solid #EEE;
				font-size: 16px;
			}

			a {
				display: block;
				line-height: 1;
				padding: 22px 0 22px 30px;
				color: #444;
				position: relative;
			}

			b {
				display: block;
				width: 18px;
				height: 18px;
				line-height: 14px;
				margin: -9px 0 0 0;
				border: 1px solid #DDD;
				font-size: 12px;
				font-weight: normal;
				.border-radius(50%);
				position: absolute;
				left: 70px;
				top: 50%;
			}
			
			// 悬停
			a:hover,
			.active {
				color: #15c288;

				b {
					border: 1px solid #15c288;
				}
			}

			.active {
				background-color: #EEE;
			}
			
			// 完成
			.done {
				color: #15c288;

				b {
					line-height: 16px;
					color: #FFF;
					background-color: #15c288;
					border: 1px solid #15c288;
				}
			}
		}

		// 主体
		.content {
			min-height: 400px;
			margin-left: 260px;
			margin-top: 20px;
			background-color: #FFF;
		}

		.title {
			padding: 10px 0;
			border-bottom: 1px solid #EEE;
			overflow: hidden;

			h5 {
				margin-left: 15px;
				font-size: 16px;
				float: left;
			}

			.btn {
				margin: 5px 10px 0 0;
			}
		}

		form {
			padding-top: 20px;
			color: #666;
		}
		
		// 创建课程
		.create {
			padding: 0 15px;
			background-color: #FFF;
			overflow: hidden;

			form {
				margin-top: 30px;
			}

			.btn {
				margin-right: -10px;
			}

			.extra {
				height: 240px;
				padding-left: 40px;
				margin-top: 30px;
				border-left: 1px solid #CCC;

				p {
					line-height: 1.5;
					color: #999;
				}
			}
		}

		// 基本信息
		.basic {
			overflow: hidden;
			padding-bottom: 20px;

			.ckeditor {
				min-height: 300px;
			}

			textarea {
				// display: none;
			}

			select {
				display: inline-block;
				width: 25%;
			}

			.help-block {
				font-size: 12px;
				margin-bottom: 0;
			}
		}

		// 课程图片
		.picture {
			padding: 20px 0 40px;
			overflow: hidden;

			.preview {
				width: 400px;
				min-height: 160px;
			}

			img {
				max-width: 100%;
				width: auto;
			}

			input[type="file"] {
				// opacity: 0;
			}

			.tips {
				margin: 20px 0;
				width: 400px;
				color: #666;
			}
		}

		// 课时管理
		.lessons {
			padding: 20px 15px;

			ul {
				margin-left: 40px;
				margin-right: 30px;
				border-left: 2px solid #CCC;
			}

			li {
				padding: 10px;
				margin-left: 24px;
				border: 1px solid #CCC;
				margin-top: 10px;
				color: #666;
				position: relative;

				&:before {
					content: '';
					display: block;
					width: 24px;
					height: 2px;
					margin-top: -1px;
					background-color: #CCC;
					position: absolute;
					top: 50%;
					left: -25px;
				}

				span {
					margin-right: 5px;
				}

				.duration {
					color: #999;
					font-size: 13px;
				}

				.action {
					display: none;
				}

				&:hover {
					background-color: #F3F3F3;

					.action {
						display: block;
					}
				}

				&:first-child {
					margin-top: 0;
				}
			}

			.fa-file-video-o {
				color: #70d445;
			}
		}
	}

	// 全部课程
	.course-list {

		.courses {
			margin-bottom: 20px;
			background-color: #FFF;
			.border-radius(4px);
		}
		
		.search {
			padding: 15px;
			border-bottom: 1px solid #EEE;
		}

		.course {
			padding: 20px 0;
			margin: 0 15px;
			border-bottom: 1px dashed #EEE;
			overflow: hidden;

			&:hover {
				background-color: #FCFCFC;
			}

			&:last-child {
				border-bottom: none;
			}

			.pic {
				width: 240px;
				height: 120px;
				overflow: hidden;
				float: left;

				position: relative;
			}

			.info {
				height: 120px;
				line-height: 1;
				padding-left: 260px;

				a {
					color: #444;
					margin: 10px 0 15px;
					font-size: 18px;

					&:hover {
						color: #15c288;
					}
				}

				li {
					margin: 8px 0;
					color: #888;
				}

				span {
					margin-right: 10px;
				}
			}
		}
	}

	// 课程分类
	.course-category {

		.category-add {
			padding: 40px 0 20px;
			background-color: #FFF;
			.border-radius(4px);
		}
	}

	// 广告管理
	.advert {

		.advert-add {
			padding: 40px 0 20px;
			background-color: #FFF;
		}
	}
}

// 登录
.login {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #2f4050;

	// 
	.login-wrap {
		width: 500px;
		height: 340px;
		padding-top: 85px;
		margin: 180px auto;
		background-color: #FFF;
		position: relative;

		.input-group {
			margin: 20px 0;
		}

		.fa {
			width: 18px;
			font-size: 20px;
		}

		.avatar {
			position: absolute;
			left: 50%;
			top: -60px;
			width: 140px;
			height: 140px;
			border: 10px solid #FFF;
			margin-left: -70px;
			border-radius: 50%;
			box-shadow: 0 1px 5px #CCC;
			background-color: pink;
		}
	}
}

#lesson {

	label {
		color: #666;
		font-weight: normal;
	}

	.help-block {
		color: #999;
		font-size: 12px;
	}
	
	input.small {
		width: 80px;
	}
}

#teacherModal {

	.avatar {
		width: 117px;
		height: 117px;
		overflow: hidden;
	}

	td, th {
		color: #666;
	}

	.introduce {
		min-height: 240px;
		padding: 15px 10px;
	}
}









